<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        
        <title>API reference for Kendo UI Drawing API static functions</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/drawing.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/drawing.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendodrawing"><a href="#kendodrawing">kendo.drawing</a></h1>

<p>Helper functions declared in the kendo.drawing namespace.</p>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-align"><a href="#methods-align">align</a></h3>

<p>Aligns drawing elements x axis position to a given rectangle.</p>

<h4>Parameters</h4>

<h5>elements <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>An array with the drawing elements that should be aligned.</p>

<h5>rect <a href="/api/javascript/geometry/rect" class="type-link"><code>kendo.geometry.Rect</code></a>
</h5>

<p>The rectangle in which the elements should be aligned.</p>

<h5>alignment <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>Specifies how should the elements be aligned. The supported values are:</p>

<ul>
<li>"start" - the elements will be aligned to the rectangle origin.</li>
<li>"center" - the elements will be aligned to the rectangle center.</li>
<li>"end" - the elements will be aligned to the right side of the rectangle.</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="surface"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var rect = new Rect([200, 0], [300, 100]);
  var path = draw.Path.fromRect(new Rect([0, 0], [100, 100]));

  draw.align([path], rect, "center");

  var surface = draw.Surface.create($("#surface"));
  surface.draw(path);
  surface.draw(draw.Path.fromRect(rect));
&lt;/script&gt;
</code></pre>

<h3 id="methods-drawDOM"><a href="#methods-drawDOM">drawDOM</a></h3>

<p>Converts the given DOM element to a <a href="/framework/drawing/overview">Drawing API</a> scene.</p>

<p>The operation is asynchronous and returns a <a href="http://api.jquery.com/Types/#Promise">promise</a>.</p>

<p>The promise will be resolved with the root <a href="drawing/group">Group</a> of the scene.</p>

<h4>Parameters</h4>

<h5>element <a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h5>

<p>The root DOM element to draw.</p>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>Configuration options</p>

<h5>options.avoidLinks <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: false)</em>
</h5>

<p>A flag indicating whether to produce clickable hyperlinks in the exported PDF file.</p>

<p>It's also possible to pass a CSS selector as argument. All matching links will be ignored.</p>

<h5>options.forcePageBreak <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>An optional CSS selector that specifies the elements that should cause page breaks.</p>

<p>See <a href="/framework/drawing/drawing-dom#multi-page-pdf-output">Multi-page PDF output</a>.</p>

<h5>options.paperSize <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "auto")</em>
</h5>

<p>The paper size for <a href="/framework/drawing/drawing-dom#automatic-page-breaking-q1-2015">automatic page breaking</a>.
The default "auto" means paper size is determined by content.</p>

<p>Supported values:</p>

<ul>
<li>A predefined size: "A4", "A3" etc</li>
<li>An array of two numbers specifying the width and height in points (1pt = 1/72in)</li>
<li>An array of two strings specifying the width and height in units.
Supported units are "mm", "cm", "in" and "pt".</li>
</ul>

<h5>options.margin <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>Specifies the margins of the page (numbers or strings with units). Supported
units are "mm", "cm", "in" and "pt" (default).</p>

<h5>options. margin.bottom <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: 0)</em>
</h5>

<p>The bottom margin. Numbers are considered as "pt" units.</p>

<h5>options. margin.left <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: 0)</em>
</h5>

<p>The left margin. Numbers are considered as "pt" units.</p>

<h5>options. margin.right <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: 0)</em>
</h5>

<p>The right margin. Numbers are considered as "pt" units.</p>

<h5>options. margin.top <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: 0)</em>
</h5>

<p>The top margin. Numbers are considered as "pt" units.</p>

<h5>options.template <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The <a href="/framework/drawing/drawing-dom#page-template-headers-and-footers">page template</a> for multi-page output.</p>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#Promise" class="type-link"><code>Promise</code></a> A promise that will be resolved with the root Group of the scene.</p>

<h4>Example - Exporting a DOM element to an image</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var draw = kendo.drawing;

    draw.drawDOM($("#calendar"))
    .then(function(root) {
        // Chaining the promise via then
        return draw.exportImage(root);
    })
    .done(function(data) {
        // Here 'data' is the Base64-encoded image file
        kendo.saveAs({
            dataURI: data,
            fileName: "calendar.png"
        });
    });
&lt;/script&gt;
</code></pre>

<h4>Example - Exporting a DOM element to a PDF file (via Base64-encoded string)</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var draw = kendo.drawing;

    draw.drawDOM($("#calendar"))
    .then(function(root) {
        // Chaining the promise via then
        return draw.exportPDF(root, {
            paperSize: "A4",
            landscape: true
        });
    })
    .done(function(data) {
        // Here 'data' is the Base64-encoded PDF file
        kendo.saveAs({
            dataURI: data,
            fileName: "calendar.pdf"
        });
    });
&lt;/script&gt;
</code></pre>

<h4>Example - Exporting a DOM element to a PDF Base64-encoded string and send it to the server via jQuery.post()</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var draw = kendo.drawing;

    draw.drawDOM($("#calendar"))
    .then(function(root) {
        // Chaining the promise via then
        return draw.exportPDF(root, {
            paperSize: "A4",
            landscape: true
        });
    })
    .done(function(data) {
        //Extracting the base64-encoded string and the contentType
        var data = {};
        var parts = dataURI.split(";base64,");
        data.contentType = parts[0].replace("data:", "");
        data.base64 = parts[1];

        //Sending the data via jQuery.post method
        jQuery.post("url/to/save/pdf", data)
    });
&lt;/script&gt;
</code></pre>

<h4>Example - Exporting a DOM element to a PDF file (direct)</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var draw = kendo.drawing;

    draw.drawDOM($("#calendar"))
    .done(function(root) {
        // Here the PDF file is saved directly
        // without creating an intermediate
        // Base64-encoded version of its content
        draw.pdf.saveAs(root, "calendar.pdf");
    });
&lt;/script&gt;
</code></pre>

<h3 id="methods-exportImage"><a href="#methods-exportImage">exportImage</a></h3>

<p>Exports a group of drawing elements as an image.</p>

<p>The group will be positioned at [0, 0] in the exported image. It's dimensions will be used as default dimensions for the image.</p>

<p>The export operation is asynchronous and returns a <a href="http://api.jquery.com/Types/#Promise">promise</a>.</p>

<p>The promise will be resolved with a PNG image encoded as a <a href="https://developer.mozilla.org/en-US/docs/data_URIs">Data URI</a>.</p>

<blockquote>
<p><em>Important</em></p>

<p>Scene images must be of same origin or <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">CORS-enabled</a>.</p>
</blockquote>

<h4>Parameters</h4>

<h5>group <a href="/api/javascript/drawing/group" class="type-link"><code>kendo.drawing.Group</code></a>
</h5>

<p>The root group containing all elements to export.</p>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>Parameters for the exported image.</p>

<h5>options.width <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h5>

<p>The width of the exported image. Defaults to the scene width.</p>

<h5>options.height <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h5>

<p>The height of the exported image. Defaults to the scene height.</p>

<h5>options.cors <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "anonymous")</em>
</h5>

<p>Specifies how <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">cross-origin images</a>
should be requested.</p>

<p>Requesting images without CORS will "taint" the canvas. It will still be visible on the page, but all
script access to it is disabled to prevent information disclosure.</p>

<p>By default they're requested anonymously. Available options are:</p>

<ul>
<li>"anonymous" - do not send user credentials as part of the request</li>
<li>"use-credentials" - send credentials as part of the request</li>
<li>false - fetch images without CORS, possibly tainting the canvas</li>
</ul>

<p>See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin attribute</a>
for more details.</p>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#Promise" class="type-link"><code>Promise</code></a> A promise that will be resolved with a PNG image encoded as a Data URI.</p>

<h4>Example - Exporting a drawing to an image</h4>

<pre><code>&lt;script&gt;
    var draw = kendo.drawing;
    var geom = kendo.geometry;

    var rect = new geom.Rect([5, 5], [240, 240]);
    var path = draw.Path.fromRect(rect).stroke("red", 5);

    var root = new draw.Group();
    root.append(path);

    draw.exportImage(root, { width: "250px", height: "250px" }).done(function(data) {
        kendo.saveAs({
            dataURI: data,
            fileName: "frame.png"
        });
    });
&lt;/script&gt;
</code></pre>

<h4>Example - Position the scene within a larger image</h4>

<pre><code>&lt;div class="content" style="background: #ffffff;"&gt;
    &lt;p&gt;Lorem ípsum dolor sit amét, pro éu facilis vulputáte témporibus. Eu méi modus requé. Unum gloriátur has et. Modo stet vix ei, apéirian iñsolens plátoñem has ex. Cum eí oporteat inímicus, prí soluta torquatos témporibus éu.&lt;/p&gt;
    &lt;p&gt;Ut eos assúm mazim vócent, cu gloríatur expetéñdis pro. Héñdrerit ádversarium reprehendunt eos ad, dúo an noster feugiat cotidieque. Vocent erroribus repudiáre ad meí. Oratio soluta eripuit sed éx. Vis et meliore appellañtur, át has discere convenire ocurreret. Eos at mazim melius aliquip, aperiam alterum commuñé pro id, zril soluta efficiantur in sit. Duis mundi duo ex, pér offendit probatus suavítate iñ.&lt;/p&gt;
    &lt;p&gt;Nec id fácilis similique, audiam moderatius ad eum. Persecuti liberavisse eum ex. Qui anímal audiré et, éum vitae coñsul dolorum eu, ín sed partem antíopam. Velít suscipit te usu. Mea ea melius scripta.&lt;/p&gt;
    &lt;p&gt;Illum delenit neglegentúr te cum, in errór inimicus disseñtias mel, placérat ocurreret ea vix. Vix ea latine voluptatum. Cúm eu albucius democritum coñsetetur, vix eu dicat deleniti, omñes ínimicus nám no. Nihil molestiae vel ex.&lt;/p&gt;
    &lt;p&gt;Eú ñominavi placerat his, eu vix timeam qualisque. Príma recusabo torquatós eos ad, ín meí próbo aequé. Ex ñoñumy vóluptua accommodare seá, sit át sanctus detráxit, ín eos case probatus tractatos. Id sit nihíl coñtentíones, ñec ut audiré elaboraret, quo alia ferri múñere ét.&lt;/p&gt;
&lt;/div&gt;
&lt;script&gt;
    var draw = kendo.drawing;
    var geom = kendo.geometry;

    var contentSize = new geom.Rect([0, 0], [800, 600]);
    var imageSize = new geom.Rect([0, 0], [1200, 800]);

    draw.drawDOM($(".content")).then(function (group) {
        // Fill the background and set the dimensions for the exported image
        var background = draw.Path.fromRect(imageSize, {
            fill: {
                color: "#ffffff",
            },
            stroke: null
        });

        // Fit content to size, if needed
        draw.fit(group, contentSize);

        // Note that the following methods accept arrays
        draw.align([group], imageSize, "center");
        draw.vAlign([group], imageSize, "center");

        // Bundle it all together
        var wrap = new draw.Group();
        wrap.append(background, group);

        // export the image and crop it for our desired size
        return draw.exportImage(wrap, {
            cors: "anonymous"
        });
    })
    .done(function(data) {
        kendo.saveAs({
            dataURI: data,
            fileName: "frame.png"
        });
    });
&lt;/script&gt;
</code></pre>

<h3 id="methods-exportPDF"><a href="#methods-exportPDF">exportPDF</a></h3>

<p>Exports a group of drawing elements as a PDF file.</p>

<p>The group will be positioned at [0, 0] in the exported file. It's dimensions will be used as default dimensions for the image.</p>

<p>The export operation is asynchronous and returns a <a href="http://api.jquery.com/Types/#Promise">promise</a>.</p>

<p>The promise will be resolved with a PDF file encoded as a <a href="https://developer.mozilla.org/en-US/docs/data_URIs">Data URI</a>.</p>

<blockquote>
<p>Scene images must be of same origin or <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">CORS-enabled</a>.</p>
</blockquote>

<h4>Parameters</h4>

<h5>group <a href="/api/javascript/drawing/group" class="type-link"><code>kendo.drawing.Group</code></a>
</h5>

<p>The root group containing all elements to export.</p>

<h5>options <a href="/api/javascript/drawing/pdfoptions" class="type-link"><code>kendo.drawing.PDFOptions</code></a>
</h5>

<p>Parameters for the exported PDF file.</p>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#Promise" class="type-link"><code>Promise</code></a> A promise that will be resolved with a PDF file encoded as a Data URI.</p>

<h4>Example - Exporting a drawing to a PDF file</h4>

<pre><code>&lt;script&gt;
    var draw = kendo.drawing;
    var geom = kendo.geometry;

    var rect = new geom.Rect([5, 5], [240, 240]);
    var path = draw.Path.fromRect(rect).stroke("red", 5);

    var root = new draw.Group();
    root.append(path);

    draw.exportPDF(root, { paperSize: "A5", landscape: true }).done(function(data) {
        kendo.saveAs({
            dataURI: data,
            fileName: "frame.pdf"
        });
    });
&lt;/script&gt;
</code></pre>

<h3 id="methods-exportSVG"><a href="#methods-exportSVG">exportSVG</a></h3>

<p>Exports a group of drawing elements as an SVG document.</p>

<p>The group will be positioned at [0, 0] in the exported file. It's dimensions will be used as default dimensions for the image.</p>

<p>The export operation is asynchronous and returns a <a href="http://api.jquery.com/Types/#Promise">promise</a>.</p>

<p>The promise will be resolved with a SVG document encoded as a <a href="https://developer.mozilla.org/en-US/docs/data_URIs">Data URI</a>.</p>

<h4>Parameters</h4>

<h5>group <a href="/api/javascript/drawing/group" class="type-link"><code>kendo.drawing.Group</code></a>
</h5>

<p>The root group containing all elements to export.</p>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>optional</em>
</h5>

<p>Export options.</p>

<h5>options.raw <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h5>

<p>Resolves the promise with the raw SVG document without the Data URI prefix.</p>

<h4>Returns</h4>

<p><a href="http://api.jquery.com/Types/#Promise" class="type-link"><code>Promise</code></a> A promise that will be resolved with a SVG document encoded as a Data URI.</p>

<h4>Example - Exporting a drawing to an SVG document</h4>

<pre><code>&lt;script&gt;
    var draw = kendo.drawing;
    var geom = kendo.geometry;

    var rect = new geom.Rect([5, 5], [240, 240]);
    var path = draw.Path.fromRect(rect).stroke("red", 5);

    var root = new draw.Group();
    root.append(path);

    draw.exportSVG(root).done(function(data) {
        kendo.saveAs({
            dataURI: data,
            fileName: "frame.svg"
        });
    });
&lt;/script&gt;
</code></pre>

<h3 id="methods-fit"><a href="#methods-fit">fit</a></h3>

<p>Scales uniformly an element so that it fits in a given rectangle. No scaling will be applied if the element is already small enough to fit in the rectangle.</p>

<h4>Parameters</h4>

<h5>element <a href="/api/javascript/drawing/element" class="type-link"><code>kendo.drawing.Element</code></a>
</h5>

<p>The drawing element that should be fitted.</p>

<h5>rect <a href="/api/javascript/geometry/rect" class="type-link"><code>kendo.geometry.Rect</code></a>
</h5>

<p>The rectangle in which the elements should be fitted.</p>

<h4>Example</h4>

<pre><code>&lt;div id="surface"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;

  var group = new draw.Group();
  var rect = new Rect([0, 0], [200, 100]);
  var path = draw.Path.fromRect(new Rect([0, 0], [300, 300]), {
    fill: {
      color: "#ff0000"
    }
  });
  group.append(path, draw.Path.fromRect(rect));

  draw.fit(path, rect);

  var surface = draw.Surface.create($("#surface"));
  surface.draw(group);
&lt;/script&gt;
</code></pre>

<h3 id="methods-stack"><a href="#methods-stack">stack</a></h3>

<p>Stacks drawing elements horizontally.</p>

<h4>Parameters</h4>

<h5>elements <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>An array with the drawing elements that should be stacked.</p>

<h4>Example</h4>

<pre><code>&lt;div id="surface"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var pathRect = new Rect([0, 0], [100, 100]);

  var pathA = Path.fromRect(pathRect);
  var pathB = Path.fromRect(pathRect);
  var pathC = Path.fromRect(pathRect);

  draw.stack([pathA, pathB, pathC]);

  var surface = draw.Surface.create($("#surface"));
  surface.draw(new draw.Group().append(pathA, pathB, pathC));
&lt;/script&gt;
</code></pre>

<h3 id="methods-vAlign"><a href="#methods-vAlign">vAlign</a></h3>

<p>Aligns drawing elements y axis position to a given rectangle.</p>

<h4>Parameters</h4>

<h5>elements <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>An array with the drawing elements that should be aligned.</p>

<h5>rect <a href="/api/javascript/geometry/rect" class="type-link"><code>kendo.geometry.Rect</code></a>
</h5>

<p>The rectangle in which the elements should be aligned.</p>

<h5>alignment <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>Specifies how should the elements be aligned. The supported values are:</p>

<ul>
<li>"start" - the elements will be aligned to the rectangle origin.</li>
<li>"center" - the elements will be aligned to the rectangle center.</li>
<li>"end" - the elements will be aligned to the bottom side of the rectangle.</li>
</ul>

<h4>Example</h4>

<pre><code>&lt;div id="surface" style="height: 300px;"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var rect = new Rect([0, 0], [100, 300]);
  var path = draw.Path.fromRect(new Rect([0, 0], [100, 100]));

  draw.vAlign([path], rect, "center");

  var surface = draw.Surface.create($("#surface"));
  surface.draw(path);
  surface.draw(draw.Path.fromRect(rect));
&lt;/script&gt;
</code></pre>

<h3 id="methods-vStack"><a href="#methods-vStack">vStack</a></h3>

<p>Stacks drawing elements vertically.</p>

<h4>Parameters</h4>

<h5>elements <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>An array with the drawing elements that should be stacked.</p>

<h4>Example</h4>

<pre><code>&lt;div id="surface" style="height:300px;"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var pathRect = new Rect([0, 0], [100, 100]);

  var pathA = Path.fromRect(pathRect);
  var pathB = Path.fromRect(pathRect);
  var pathC = Path.fromRect(pathRect);

  draw.vStack([pathA, pathB, pathC]);

  var surface = draw.Surface.create($("#surface"));
  surface.draw(new draw.Group().append(pathA, pathB, pathC));
&lt;/script&gt;
</code></pre>

<h3 id="methods-vWrap"><a href="#methods-vWrap">vWrap</a></h3>

<p>Stacks drawing elements vertically. Multiple stacks will be used if the elements height exceeds the given rectangle height.</p>

<h4>Parameters</h4>

<h5>elements <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>An array with the drawing elements that should be wrapped.</p>

<h5>rect <a href="/api/javascript/geometry/rect" class="type-link"><code>kendo.geometry.Rect</code></a>
</h5>

<p>The rectangle in which the elements should be wrapped.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> An array with the stacks. Each stack is an <code>Array</code> holding the stack drawing elements.</p>

<h4>Example</h4>

<pre><code>&lt;div id="surface" style="height:300px;"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var rect = new Rect([0, 0], [250, 250])
  var pathRect = new Rect([0, 0], [100, 100]);
  var group = new draw.Group();
  var pathA = Path.fromRect(pathRect);
  var pathB = Path.fromRect(pathRect);
  var pathC = Path.fromRect(pathRect);

  var stacks = draw.vWrap([pathA, pathB, pathC], rect);
  for (var idx = 0; idx &lt; stacks.length; idx++) {
    var stackGroup = new draw.Group();
    stackGroup.append.apply(stackGroup, stacks[idx]);
    group.append(stackGroup);
  }
  draw.stack(group.children);

  group.append(Path.fromRect(rect));

  var surface = draw.Surface.create($("#surface"));
  surface.draw(group);
&lt;/script&gt;
</code></pre>

<h3 id="methods-wrap"><a href="#methods-wrap">wrap</a></h3>

<p>Stacks drawing elements horizontally. Multiple stacks will be used if the elements width exceeds the given rectangle width.</p>

<h4>Parameters</h4>

<h5>elements <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h5>

<p>An array with the drawing elements that should be wrapped.</p>

<h5>rect <a href="/api/javascript/geometry/rect" class="type-link"><code>kendo.geometry.Rect</code></a>
</h5>

<p>The rectangle in which the elements should be wrapped.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a> An array with the stacks. Each stack is an <code>Array</code> holding the stack drawing elements.</p>

<h4>Example</h4>

<pre><code>&lt;div id="surface" style="height:300px;"&gt;&lt;/div&gt;
&lt;script&gt;
  var draw = kendo.drawing;
  var Rect = kendo.geometry.Rect;
  var Path = draw.Path;
  var rect = new Rect([0, 0], [250, 250])
  var pathRect = new Rect([0, 0], [100, 100]);
  var group = new draw.Group();
  var pathA = Path.fromRect(pathRect);
  var pathB = Path.fromRect(pathRect);
  var pathC = Path.fromRect(pathRect);

  var stacks = draw.wrap([pathA, pathB, pathC], rect);
  for (var idx = 0; idx &lt; stacks.length; idx++) {
    var stackGroup = new draw.Group();
    stackGroup.append.apply(stackGroup, stacks[idx]);
    group.append(stackGroup);
  }
  draw.vStack(group.children);

  group.append(Path.fromRect(rect));

  var surface = draw.Surface.create($("#surface"));
  surface.draw(group);
&lt;/script&gt;
</code></pre> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

